<template>
  <view>
    <u-navbar :is-back="false" :is-fixed="true" title="订单"></u-navbar>
    <!-- Tab navigation -->
    <view class="fixed-top bg-white" style="margin-top: 44px">
      <view class="px-2 mt-2 pb-2 dfes">
        <i
          class="iconfont icon-jia text-8ED0F2 mr-2"
          @click="open('tabbar/order/addOrder')"
        ></i>
        <u-search
          placeholder="请输入关键字 "
          height="60"
          border-color="#8ED0F2"
          search-icon-color="#8ED0F2"
          bg-color="#fff"
          v-model="keyword"
          :action-style="actionStyle"
        ></u-search>
      </view>
      <scroll-view
        scroll-x
        class="tab-scroll"
        :scroll-into-view="scrollinto"
        :scroll-with-animation="true"
        :show-scrollbar="false"
      >
        <view
          class="px-3 tab-item"
          v-for="(item, index) in tabBars"
          :id="'tab' + index"
          @click="changeTab(index)"
          :key="index"
        >
          <view
            class="font-16 dfex"
            :class="tabIndex === index ? 'text-8ED0F2 active' : ''"
          >
            {{ item.name }}
          </view>
        </view>
      </scroll-view>
      <u-gap height="20" bg-color="#f7f7f7"></u-gap>
    </view>

    <view class="p-2" style="margin-top: 100px; height: 100vh">
      <scroll-view scroll-y style="height: calc(100vh - 60px)">
        <view
          v-for="(item, index) in tabs"
          :key="index"
          class="pb-2 mt-2 content-item"
        >
          <!-- Add your tab content here -->
          <view class="show-dd pl-2 bg-white pt-2">
            <view class="dfes">
              <view class="font-14 text-333333 font-weight-bold">{{
                item.productServeName
              }}</view>
              <view
                class="position-absolute text-FFC251 font-14"
                style="right: 10px"
              >
                {{ item.orderState_dictText }}
              </view>
            </view>
            <view class="lineHight mt-2">
              <view>订单编号：{{ item.orderNumber }}</view>
              <view>涉农企业：{{ item.agricultureUserId_dictText }}</view>
              <view>订单时间：{{ item.orderTime }}</view>
            </view>

            <view class="lineHight-3 text-right">
              <u-button
                v-if="item.su === '上游订单'"
                class="mr-1 borRound text-78AB06"
                :plain="false"
                :hair-line="false"
                size="mini"
                shape="circle"
                @click="open('tabbar/order/upstreamOrders')"
                >查看订单</u-button
              >
              <u-button
                v-else
                class="mr-1 borRound text-78AB06"
                :plain="false"
                :hair-line="false"
                size="mini"
                shape="circle"
                @click="open('tabbar/order/downstreamOrders')"
                >查看订单</u-button
              >
              <u-button
                class="mr-1 borRound text-78AB06"
                :plain="false"
                :hair-line="false"
                size="mini"
                shape="circle"
                >关闭订单</u-button
              >
              <u-button
                class="mr-1 borRound text-78AB06"
                :plain="false"
                :hair-line="false"
                size="mini"
                shape="circle"
                >进度填写</u-button
              >
              <u-button
                class="mr-1 borRound text-78AB06"
                :plain="false"
                :hair-line="false"
                size="mini"
                shape="circle"
                v-if="item.su === '上游订单'"
                @click="open('tabbar/order/modifyOrder')"
                >修改订单</u-button
              >
              <u-button
                class="mr-1 borRound text-78AB06"
                :plain="false"
                :hair-line="false"
                size="mini"
                shape="circle"
                v-else
                @click="open('tabbar/order/modifications')"
                >修改订单</u-button
              >
              <u-button
                class="mr-1 borRound text-78AB06"
                :plain="false"
                :hair-line="false"
                size="mini"
                shape="circle"
                >订单作废</u-button
              >
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
import $H from "@/common/free-lib/request.js";

export default {
  data() {
    return {
      pageNo: 1,
      pageSize: 10,
      tabBars: [
        {
          id: 1,
          name: "全部",
          type: "",
          orderType: "",
        },
        {
          id: 2,
          name: "对接中",
          type: "docking",
          orderType: "true",
        },
        {
          id: 3,
          name: "待评价",
          type: "evaluate",
          orderType: "true",
        },
        {
          id: 4,
          name: "已完成",
          type: "complete",
          orderType: "true",
        },
        {
          id: 5,
          name: "线下订单",
          type: "",
          orderType: "false",
        },
      ],
      scrollinto: "",
      tabIndex: 0,
      keyword: "",
      actionStyle: {
        color: "#8ED0F2",
      },
      tabs: [
        {
          productServeName: "订单/服务名称商标注册",
          orderState_dictText: "对接中",
          orderNumber: "123",
          agricultureUserId_dictText: "上游服务商企业名称",
          orderTime: "",
        },
      ],
    };
  },
  onLoad() {
    this.getOrderList(this.pageNo, this.pageSize);
  },
  methods: {
    open(path) {
      uni.navigateTo({
        url: "/pages/" + path,
      });
    },
    // Change the active tab
    changeTab(index) {
      if (this.tabIndex === index) return;
      this.tabIndex = index;
      this.scrollinto = "tab" + index;
    },
    // Handle tab change event
    onChangeTab(e) {
      this.changeTab(e.detail.current);
    },
    getOrderList(no, size) {
      $H.get(
        "/upper/upperMarketOrder/upper/list",
        {
          pageNo: no,
          pageSize: size,
          orderType: this.tabBars[this.tabIndex].orderType,
          orderState: this.tabBars[this.tabIndex].type,
        },
        {}
      )
        .then((res) => {
          if (res.result.records.length == 0) {
            uni.showToast({
              title: "没有更多啦！",
              icon: "success",
            });
            return;
          }
          const noticeList = [];
          for (let i = 0; i < res.result.records.length; i++) {
            if (res.result.records[i].title) {
              noticeList.push({
                id: res.result.records[i].id,
                title: res.result.records[i].title,
                isRead: res.result.records[i].isRead,
              });
            }
          }
          this.notices = noticeList;
        })
        .catch((error) => {
          console.error("请求出错", error); // 处理任何错误
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.tab-scroll {
  width: 100vw;
}

.tab-item {
  margin-left: 2px;
  display: inline-block;
  text-align: center;
  padding: 0 12px;
  line-height: 40px;
}

.active {
  border-bottom: 2px solid #8ed0f2;
}
</style>